<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>Slider(滑块控件)测试页面</title>
    <link href="/static/css/index.css" rel="stylesheet" type="text/css">
    <link href="/static/css/controls.css" rel="stylesheet" type="text/css">
    <style>[ng-cloak]{display:none}</style>
</head>
<body ng-cloak style="margin: 50px 50px;" ng-controller="SlideCtrl">
   <!--
    g-slide:滑块属性说明
        single:true:单值滑块(默认)，false:双值滑块
        orientation:vertical:垂直，horizontal(默认)水平
        length:水平为长度，垂直为高度。
        max-value:滑块最大值
        min-value:最小值
        ng-show:是否显示:true:显示，false:不显示
        disabled:只要有设置即为禁用，如:disabled="disabled"
    -->
   <table style="margin-left:50px;">
       <tr>
           <td style="width:600px;"> <g-slider ng-show="show"  length="300" ng-model="singleValue"  max-value="10" min-value="2"></g-slider></td>
           <td> <g-slider length="300" single="false" ng-model="hfirstValue" second-value="hsecondValue"  max-value="500" min-value="30"></g-slider></td>
       </tr>
       <tr>
           <td> <div style="margin-top:10px;margin-bottom:20px;">
               <label>双向绑定值：</label>
               <br>
               <label>单个滑块的值:</label>
               <input style="display:inline-block;" type="text" g-width="100px" ng-model="singleValue" class="form-text"/>
           </div>
           </td>
           <td><div style="margin-top:10px;">
               <label>双向绑定值：</label>
               <br>
               <label>第一个滑块的值:</label>
               <input style="display:inline-block;" type="text" g-width="50px" ng-model="hfirstValue" class="form-text"/>
               <label>第二个滑块的值:</label>
               <input style="display:inline-block;" type="text" g-width="50px" ng-model="hsecondValue" class="form-text"/>
           </div></td>
       </tr>
   </table>


   <table style="margin-left:50px;">
       <tr>
           <td>
               <g-slider length="300" single="true" ng-model="vsingleValue" orientation="vertical"  max-value="1000" min-value="100"></g-slider>
           </td>
           <td style="width:600px;">
               <label>双向绑定值：</label>
               <br>
               <label>单个滑块的值:</label>
               <input style="display:inline-block;" type="text" g-width="100px" ng-model="vsingleValue" class="form-text"/>
           </td>
           <td>
               <g-slider length="300" single="false" ng-model="vfirstValue" second-value="vsecondValue" orientation="vertical"  max-value="2000" min-value="200"></g-slider>
           </td>
           <td>
               <label>双向绑定值：</label>
               <br>
               <label>第一个滑块的值:</label>
               <input style="display:inline-block;" type="text" g-width="50px" ng-model="vfirstValue" class="form-text"/>
               <label>第二个滑块的值:</label>
               <input style="display:inline-block;" type="text" g-width="50px" ng-model="vsecondValue" class="form-text"/>
           </td>
       </tr>
   </table>

   <script>
       var ctx = '';
       var basePath = '/gillion-web';
       var locale = 'zh-cn'
   </script>
   <script src="/bower_components/requirejs/require.js" data-main="/static/app.js"
           data-bootstrap-modules="['framework/slider/TestSliderModule']"></script>
</body>
</html>